<template>
	<view class="">
		<view class="cell-item">
			<view class="cell-item-title">姓名</view>
			<input type="text" v-model="name" placeholder="请输入姓名">
		</view>
		<view class="cell-item">
			<view class="cell-item-title">手机</view>
			<input type="text" v-model="phone" placeholder="请输入手机">
		</view>
		<view class="cell-item-switch">
			<view class="cell-item-title">是否默认地址</view>
			<u-switch v-model="switchValue" activeColor="#1B7E38" @change="changeSwitch"></u-switch>
		</view>
		<view class="cell-item">
			<view class="cell-item-title">地址</view>
			<input style="width:83%;text-align: right;" disabled v-model="address" placeholder="请选择">
			<image @click="showCity = true" src="/static/message/right.png" mode=""></image>
		</view>

		<view class="cell-textare">
			<textarea class="textare" v-model="detail" placeholder="请输入详细地址" cols="30" rows="10"></textarea>
		</view>
		<cityPicker :column="column" :mask-close-able="false" @confirm="confirm" @cancel="showCity = false"
			:visible="showCity" />
		<view class="detail-bottom-btn" @click="addBtn(title)">
			{{title}}
		</view>
	</view>
</template>

<script>
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	export default {
		components: {
			cityPicker
		},
		data() {
			return {
				title: '新增收获地址',
				column: 3, //可选值2和3，2是省市两列选择；3是省市区三列选择
				name: '',
				phone: '',
				address: '',
				detail: '',
				showCity: false,
				province_id: '',
				city_id: '',
				region_id: '',
				switchValue: false, //是否默认地址
				is_default: 1, //是否默认0否1是
				id: ''
			}
		},
		onLoad(options) {
			console.log(options.title)
			if (options.title) {
				this.id = JSON.parse(options.addressItem).id
				this.address = JSON.parse(options.addressItem).Area.province + JSON.parse(options.addressItem).Area.city +
					JSON
					.parse(options.addressItem).Area.region
				this.province_id = JSON.parse(options.addressItem).province_id
				this.city_id = JSON.parse(options.addressItem).city_id
				this.region_id = JSON.parse(options.addressItem).region_id
				this.name = JSON.parse(options.addressItem).name
				this.phone = JSON.parse(options.addressItem).phone
				this.detail = JSON.parse(options.addressItem).detail
				this.is_default = JSON.parse(options.addressItem).is_default
				this.switchValue = JSON.parse(options.addressItem).is_default == 1 ? true : false;
				this.title = options.title
				uni.setNavigationBarTitle({
					title: options.title ? options.title : '新增收获地址'
				})
			}
			
		},
		methods: {
			// 地区选择
			confirm(val) {
				this.address = val.name
				this.province_id = val.province_id
				this.city_id = val.city_id
				this.region_id = val.region_id
				this.showCity = false
			},
			changeSwitch(e) {
				this.is_default = e == true ? 1 : 0
			},
			// 添加地址
			addBtn(title) {
				if (!this.name) {
					uni.showToast({
						icon: 'none',
						title: '请输入姓名'
					})
					return
				}
				if (!this.phone) {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号'
					})
					return
				}
				if (!this.province_id) {
					uni.showToast({
						icon: 'none',
						title: '请选择地址'
					})
					return
				}
				if (!this.detail) {
					uni.showToast({
						icon: 'none',
						title: '请输入详细地址'
					})
					return
				}
				if (title == '新增收获地址') {
					this.$http('address.addressAdd', {
						name: this.name,
						is_default: this.is_default,
						detail: this.detail,
						phone: this.phone,
						province_id: this.province_id,
						city_id: this.city_id,
						region_id: this.region_id
					}, '添加中...').then(res => {
						if (res.code == 1) {
							uni.navigateBack({
								delta: 1
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					})
				} else {
					this.$http('address.setEdit', {
						id: this.id,
						name: this.name,
						is_default: this.is_default,
						detail: this.detail,
						phone: this.phone,
						province_id: this.province_id,
						city_id: this.city_id,
						region_id: this.region_id
					}, '修改中...').then(res => {
						if (res.code == 1) {
							uni.navigateBack({
								delta: 1
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F6F7F9;
	}

	.cell-item-switch {
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		padding: 20rpx;
		border-bottom: 3rpx solid #EEEEEE;

		.cell-item-title {
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;
			margin: 20rpx 20rpx 0 0;

		}
	}

	.cell-item {
		display: flex;
		background-color: #fff;
		padding: 20rpx;
		border-bottom: 3rpx solid #EEEEEE;

		image {
			width: 16rpx;
			height: 28rpx;
			margin: 28rpx 0 0 20rpx;
		}

		.cell-item-title {
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;
			margin: 20rpx 20rpx 0 0;

		}

		input {
			width: 85%;
			height: 80rpx;
		}
	}

	.cell-textare {
		width: 100%;
		height: 230rpx;
		background-color: #fff;
		padding-top: 20rpx;

		.textare {
			width: 350px;
			height: 160rpx;
			background: #F6F6F6;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			margin: 0 auto;
			padding: 10rpx;
		}
	}

	.detail-bottom-btn {
		position: fixed;
		z-index: 200;
		bottom: 30rpx;
		width: 686rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #6AAE2B 0%, #1B7E38 100%);
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		left: 50%;
		transform: translate(-50%);
		border-radius: 50rpx;
	}
</style>